<template>
  <div class="left-block3">
    <div class="data-title">生产计划</div>
    <div class="static-info">
      <p class="com1">
       
        <span class="num" v-text="total.planStage" />
        <span class="t"><i class="iconfont icon-yuanhuan" />计划完成</span>
      </p>
      <p class="com2">
        <span class="num" v-text="total.planFinshNumber" />
        <span class="t"><i class="icon-wancheng iconfont" />实际完成</span>
      </p>
    </div>
    <div ref="data" class="com-list scroll-wrap" style="height: 150px"  id="ddd" >
      <div v-for="(item, index) in list" :key="index" class="item">
        <div class="date">
          <span class="icon-circle iconfont" />
          <span class="d">{{ item.dateStr | dateFormat("M月DD日") }}</span>
        </div>
        <div
          v-for="(c, cindex) in item.dataInfo"
          :key="cindex"
          class="time"
          :class="{ active: c.status === 1 }"
        >
          <!--<span class="t">{{ c.planTime|dateFormat('HH:mm') }}</span>-->
          <template v-if="c.status === 0">
            <span class="iconfont icon-yuanhuan" />
            <template v-if="c.considerations">
              <el-tooltip
                class="item"
                effect="dark"
                :content="c.considerations"
                placement="top"
              >
                <span class="name text-ellipsis">{{ c.planName }} </span>
              </el-tooltip>
            </template>
            <template v-else>
              <span class="name text-ellipsis">{{ c.planName }}</span>
            </template>
            <!--            <span class="name text-ellipsis" style="font-size: 10px; color: #50E3C2;float: right; width: 60px;line-height: 20px">{{ c.planTime|dateFormat('HH:mm') }}</span>-->
          </template>
          <template v-if="c.status === 1"  id="sss">
            <span class="iconfont icon-yuanhuan" style="color: #f5a623"  />
            <template v-if="c.considerations">
              <el-tooltip
                class="item"
                effect="dark"
                :content="c.considerations"
                placement="top"
              >
                <span
                  class="name text-ellipsis" :idinx=cindex
                  style="font-size: 16px; color: #f5a623"
                  >{{ c.planName }} </span
                >
              </el-tooltip>
            </template>
            <template v-else>
              <span
                class="name text-ellipsis"
                style="font-size: 16px; color: #f5a623"
                >{{ c.planName }}</span
              >
            </template>
            <!--            <span class="name text-ellipsis" style="font-size: 10px; color: #50E3C2;float: right; width: 60px;line-height: 20px"></span>-->
            <span
              class="name text-ellipsis"
              style="
                font-size: 14px;
                color: #ffffff;
                float: right;
                width: 100px;
                line-height: 20px;
              "
              >{{ c.planTime | dateFormat("HH:mm") }}-<label
                style="color: #50e3c2; font-size: 12px"
                >进行中</label
              ></span
            >
          </template>
          <template v-if="c.status === 2">
            <span class="iconfont icon-wancheng" />
            <template v-if="c.considerations">
              <el-tooltip
                class="item"
                effect="dark"
                :content="c.considerations"
                placement="top"
              >
                <span class="name text-ellipsis">{{ c.planName }}</span>
              </el-tooltip>
            </template>
            <template v-else>
              <span class="name text-ellipsis">{{ c.planName }}</span>
            </template>
            <!--            <span class="name text-ellipsis" style="font-size: 10px; color: #50E3C2;float: right; width: 60px;line-height: 20px"></span>-->
            <span
              class="name text-ellipsis"
              style="
                font-size: 14px;
                color: #ffffff;
                float: right;
                width: 100px;
                line-height: 20px;
              "
              >{{ c.planTime | dateFormat("HH:mm") }}-{{
                c.mt | dateFormat("HH:mm")
              }}</span
            >
          </template>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { postHandle } from "@/api";
import AutoRefreshMixin from "../mixin/AutoRefreshMixin";
export default {
  name: "ProductionPlan",
  mixins: [AutoRefreshMixin],
  props: {
    newSpaceId: {
      type: String,
    },
  },
  data() {
    return {
      total: {},
      list: [],
      idinx: 0,
    };
  },
  computed: {
    spaceId() {
      return this.$store.state.project.spaceId;
    },
    project() {
      return this.$store.state.project.object;
    },
      
  },
  watch: {
    
    newSpaceId(v) {
      if (v) this.autoRefreshHandle();
    },
    newSpaceIdx(){
     // this.lings();
    }
  },
  created() {
    
  },
  mounted() {
    this.autoRefreshHandle();
 
  },
  methods: {
   
   
    refreshHandle() {
      this.getData();
      this.getCount(this.project.id);
    },
    getData() {
      postHandle(`/api/v1/welder-sbtx-second/plan-info-comb/list`, {
        d: {
          filters: [
            {
              field: "spaceId",
              operator: "EQUALS",
              value: this.newSpaceId || this.spaceId,
            },
          ],
          sorts: [{ field: "planTime", isDesc: false }],
        },
      }).then((res) => {
        this.list = res.result;
      });
    },
    getCount(id) {
      postHandle(`/api/v1/welder-sbtx-second/plan-info-comb/count/${id}`).then(
        (res) => {
          this.total = res.result;
          this.scrollIntoView();
        }
      );
    },
    scrollIntoView() {
      this.$nextTick(() => {
        let active = this.$refs["data"].getElementsByClassName("active")[0];
        if (active) {
          this.$refs["data"].scrollTo = active.parentElement.offsetTop;
          // this.$refs['data'].scrollTo(0, active.parentElement.offsetHeight - (active.parentElement.offsetHeight - active.offsetHeight))
        }
        // // console.info(this.$refs['data'].scrollTo(0, 200))
      });
    },
  },
};
</script>

<style scoped>
</style>